<template>
	<el-container class="flow-widget">
		<el-aside width="70px" class="widget-aside">
			<template v-for="(item, index) in allMenus">
				<div
					class="widget-item"
					:class="{
						active: item.short == state.currentTab,
					}"
					:title="item.name"
					@click="switchTo(item)"
				>
					<SvgIcon :name="item.icon" :size="25" />
					<span>{{ item.name }}</span>
				</div>
			</template>
		</el-aside>
		<el-scrollbar class="widget-container" :style="{ height: scrollerHeight }">
			<el-container>
				<rulechain v-if="state.currentTab === 'rulechain'" @dragInNode="dragInNode" style="width: 100%"></rulechain>
				<!--拓扑组态-->
				<material v-if="state.currentTab === 'matter'"></material>
				<!--素材广场-->
				<FormNode v-if="state.currentTab === 'form'" @dragInNode="dragInNode" style="width: 100%"></FormNode>
			</el-container>
		</el-scrollbar>
	</el-container>
</template>

<script setup lang="ts">
import { inject, ref, onMounted, nextTick } from 'vue';
import Material from './dndPanel/material.vue';
import FormNode from './dndPanel/formNode.vue';
import { ModelerContext } from '../../useapi';
import { addWindowResizeHandler } from '../../../../utils/util';
import SvgIcon from '../../../../components/component/SvgIcon/index.vue';

const scrollerHeight = ref('0');
const state: any = inject<any>('state');

const modeler: ModelerContext = inject<any>('modeler_context');

const switchTo = (item: any) => {
	state.currentTab = item.short;
};

const dragInNode = (item: any) => {
	modeler.lf?.dnd.startDrag(item);
};

const allMenus = [
	{
		name: '规则引擎',
		short: 'rulechain',
		icon: 'chain',
	},
	{
		name: '素材广场',
		short: 'matter',
		icon: 'matter',
	},
	{
		name: '流程节点',
		short: 'form',
		icon: 'node',
	},
];

onMounted(() => {
	scrollerHeight.value = window.innerHeight - 48 + 'px';
	addWindowResizeHandler(() => {
		nextTick(() => {
			scrollerHeight.value = window.innerHeight - 48 + 'px';
		});
	});
});
</script>

<style lang="scss" scoped></style>
